<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
   <h1>表格</h1>
   <p>
表格元素
table--表格<br>
thead -- 表头<br>
tbody -- 表体<br>
tr--行<br>
td--列<br>
th--表头列<br>
属性：<br>
cellspacing：单元格间距
cellpadding：单元格边距
caption：表格的标题


   </p> 
   <table border="1px" cellspacing="0px" cellpadding="0px">
    <caption>学生信息</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>年级</th>
        </tr>
         </thead>
        <tbody><tr>
            <td>tom</td>
            <td>男</td>
            <td>22</td>
            <td>大二</td>
        </tr>
         <tr>
            <td>jack</td>
            <td>男</td>
            <td>22</td>
            <td>大二</td>
        </tr>
   </tbody>
   </table>

   <table border="1px" cellspacing="0px" cellpadding="2px">
   
    <caption>餐厅菜单</caption>
    <thead>
        <tr>
        <th>菜名</th>
        <th>图片</th>
        <th>地址</th>
        <th>电话</th>
    </tr>
    </thead>
    <tbody>
        <tr>
        <td>鱼香肉丝</td>
        <td><img src="./img/s1.jpg" width="50px" height="30px"></td>
        <td>大连</td>
        <td>123456</td>
</tr>
  <tr>
        <td>菠萝盖饭</td>
        <td><img src="./img/s2.jpg" width="50px" height="30px"></td>
        <td>大连</td>
        <td>123456</td>
</tr>
    </tbody>
   </table>


    <h2>合并单元格</h2>
    <p>行合并
        行合并使用属性rowspan="行合并的行数"
    </p>
    <table border="1">
        <tr>
            <td rowspan="2">1-4合并</td>
            <td>2</td>
            <td rowspan="2">3-6合并</td>
        </tr>
         <tr>
            
            <td>5</td>
            
        </tr>
    </table>
    <hr>
    <h2>列合并</h2>
    <p>
        列合并使用属性colspan="列合并的列数"
    </p>
    <table border="1px">
        <tr>
            <td colspan="2">1-2合并</td>
              <td>3</td>
        </tr>
        <tr>
            <td colspan="3">456合并</td>
             
        </tr>
    </table>

    <!--本周课程表-->
    <h2 center>课程表</h2>
    <table border="1px" cellsapcing="0px">
        <thead>
            <tr>
                <th>周一</th>
                <th>周二</th>
                <th>周三</th>
                <th>周四</th>
                <th>周五</th>
                
            </tr>

        </thead>
        <tbody>
             <tr>
                <td rowspan="2">API</td>
              
                <td>SQL</td>
                <td>jdbc</td>
                <td>jdbc</td>
                <td >html</td>
                

            </tr>
            <tr>
                
                <td>SQL</td>
                <td>jdbc</td>
                <td>jdbc</td>
                <td >html</td>
            </tr>
               <tr>
                <td colspan="5" center>午休</td>
                
            </tr>
            <tr>
                <td>SQL</td>
                <td>SQL</td>
                <td>jdbc</td>
                <td>html</td>
                <td rowspan="3">软技能</td>
            </tr>
            <tr>
                <td>sql</td>
                <td>sql</td>
                <td>jdbc</td>
                <td>html</td>
                
            </tr>
            <tr>
                <td >sql</td>
                <td >sql</td>
                <td >软技能</td>
                <td>html</td>
                
            </tr>
        </tbody>
    </table>
</body>
</html>





































